<template>
  <div id="app">
    <example />
    <!-- <canvas v-show="false" id="myCanvas" width="500" height="500"></canvas> -->
    <!-- <img src="@/assets/point.png" alt="" srcset=""> -->
  </div>
</template>

<script>
import example from "./views/example.vue"

export default {
  name: "App",
  components: {
    example,
  },
  data() {
    return {}
  },
  methods: {
    canvasGradual() {
      let canvas = document.getElementById("myCanvas")
      let ctx = canvas.getContext("2d")
      let grad = ctx.createRadialGradient(250, 250, 0, 250, 250, 500)
      grad.addColorStop(0, "rgba(240,250,40,0.8)")
      grad.addColorStop(0.25, "rgba(327,201,64,0.8)")
      grad.addColorStop(0.5, "rgba(22,184,200,0.8)")
      grad.addColorStop(1, "rgba(82,67,192,0.8)")
      ctx.fillStyle = grad
      ctx.fillRect(0, 0, 500, 500)
    },
  },
  mounted() {
    // this.canvasGradual()
  },
  created() {},
}
</script>

<style lang="scss">
#app {
  width: 100%;
  height: 100vh;
  padding: 20px;
  box-sizing: border-box;
  background: #666;
}
</style>
